<c-layouts.with-sidebar>
    <c-slot name="page_index">
        <c-index-link><a href="#icons" class="no-underline">Icons &amp; SVG Graphics</a></c-index-link>
        <c-index-sublink><a href="#cottonizing" class="no-underline">Cotton-izing</a></c-index-sublink>
    </c-slot>

    <h1 id="icons">Icons &amp; SVG Graphics</h1>

    <p>Cotton's component-ized approach provides another compelling use-case. Sure, there are svg icon packages for Django already, but what if you need to use a custom icon in your project?</p>

    <c-snippet label="plane.svg">{% cotton:verbatim %}{% verbatim %}
<svg viewBox="0 0 512 512">
  <g fill="none" stroke="#000" stroke-width="30" stroke-linejoin="round">
    <path d="M143.533 256 79.267 384.533v-192.8L497 127.467z"/>
    <path d="M143.533 256 79.267 384.533l119.352-73.448zM15 127.467h482L79.267 191.733z"/>
    <path d="M143.533 256 497 127.467l-241 241z"/>
  </g>
</svg>{% endverbatim %}{% endcotton:verbatim %}
<c-slot name="preview">
<svg viewBox="0 0 512 512" class="size-20 mx-auto">
  <g fill="none" stroke="#000" stroke-width="30" stroke-linejoin="round">
    <path d="M143.533 256 79.267 384.533v-192.8L497 127.467z"/>
    <path d="M143.533 256 79.267 384.533l119.352-73.448zM15 127.467h482L79.267 191.733z"/>
    <path d="M143.533 256 497 127.467l-241 241z"/>
  </g>
</svg>
</c-slot>
    </c-snippet>

    <h2 id="cottonizing">Let's "cotton-ize"</h2>

    <c-snippet label="cotton/icons/plane.html">{% cotton:verbatim %}{% verbatim %}
<c-vars stroke_width="30" />

<svg {{ attrs }} viewBox="0 0 512 512">
  <g fill="none" stroke="currentColor" stroke-width="{{ stroke_width }}" stroke-linejoin="round">
    <path d="M143.533 256 79.267 384.533v-192.8L497 127.467z"/>
    <path d="M143.533 256 79.267 384.533l119.352-73.448zM15 127.467h482L79.267 191.733z"/>
    <path d="M143.533 256 497 127.467l-241 241z"/>
  </g>
</svg>{% endverbatim %}{% endcotton:verbatim %}
    </c-snippet>

    <c-snippet label="view.html">{% cotton:verbatim %}{% verbatim %}
<c-icons.plane class="size-20 text-red-500" />
<c-icons.plane class="size-20 text-teal-500" />
<c-icons.plane class="size-20 text-gray-500 animate-bounce" />
<c-icons.plane class="size-24 text-purple-500" stroke_width="10" />
    {% endverbatim %}{% endcotton:verbatim %}
    <c-slot name="preview">
        <div class="flex items-center space-x-10 justify-center">
            <c-examples.icons.plane class="size-20 text-red-500" />
            <c-examples.icons.plane class="size-20 text-teal-500" />
            <c-examples.icons.plane class="size-20 text-gray-500 animate-bounce" />
            <c-examples.icons.plane class="size-24 text-purple-500" stroke_width="10" />
        </div>
    </c-slot>
    </c-snippet>

<c-navigation>
    <c-slot name="prev">
        <a href="{% url 'layouts' %}">Layouts</a>
    </c-slot>
</c-navigation>

</c-layouts.with-sidebar>